<template>
  <div class="hello" style="padding-top:50p; width: 100%;">
    <Form :model="invatationinfo" :label-width="150">
        <FormItem label="城市名称" v-if="!hidecityandcustomer">
            <Input v-model="invatationinfo.cityname" placeholder="请输入城市名称" style="width:150px;" />
        </FormItem>
        <FormItem label="客户姓名" v-if="!hidecityandcustomer">
            <Input v-model="invatationinfo.customername" placeholder="请输入客户姓名" style="width:150px;" />
        </FormItem>
        <div class="groupheader">{{ invatationinfo.meetingname }}</div>
        <FormItem label="人数">
            <Input v-model="invatationinfo.number" placeholder="请输入人数" style="width:80px;" />
        </FormItem>
        <FormItem :label="listtitleobj">
            <Input v-model="invatationinfo.list" :placeholder="listtitleobj" style="width:250px;" />
        </FormItem>
        <FormItem label="到达时间">
            <DatePicker type="date" placeholder="请选择到达时间" v-model="invatationinfo.arrivaltime"></DatePicker>
        </FormItem>
        <FormItem label="是否已订酒店">
            <i-switch v-model="invatationinfo.needbook">
                <span slot="open">否</span>
                <span slot="close">是</span>
            </i-switch>&nbsp;&nbsp;&nbsp;&nbsp;填写下面内容
        </FormItem>
        <FormItem label="酒店名称" v-if="invatationinfo.needbook">
            <Select v-model="invatationinfo.hotelinfo.hotelname" style="width: 220px;">
                <Option value="维也纳龙华大浪店">维也纳龙华大浪店</Option>
                <Option value="曼谷一号大浪店">曼谷一号大浪店</Option>
            </Select>
        </FormItem>
        <FormItem label="酒店房间类型" v-if="invatationinfo.needbook">
            <div v-for="(room, ii) in invatationinfo.hotelinfo.rooms" :key="room._id">
                <Select v-model="room.roomtypename" style="width: 100px;">
                    <Option value="双人标间">双人标间</Option>
                    <Option value="单人大床间">单人大床间</Option>
                    <Option value="豪华套房">豪华套房</Option>
                </Select>
                &nbsp;&nbsp;房间数
                <Select v-model="room.quantity" style="width: 80px;">
                    <Option :key="index" :value="index" v-for="index in 10">{{index}}</Option>
                </Select>
                <Button type="success" shape="circle" icon="plus" size="small" v-if="ii<=0" @click="addroom"></Button>
                <Button type="error" shape="circle" icon="minus" size="small" v-if="ii>0" @click="removeroomat(ii)"></Button>
            </div>
        </FormItem>
        <FormItem label="入住时间" v-if="invatationinfo.needbook">
            <DatePicker type="date" placeholder="请选择入住时间" v-model="invatationinfo.hotelinfo.checkintime"></DatePicker>
        </FormItem>
        <FormItem label="入住天数" v-if="invatationinfo.needbook">
          <Select v-model="invatationinfo.hotelinfo.days" style="width: 80px;">
              <Option :key="index" :value="index" v-for="index in 10">{{index}}</Option>
          </Select>
        </FormItem>
        <FormItem label="人员照片" v-if="!hidephototipobj">
            <i-switch v-model="invatationinfo.needuploadphoto">
                <span slot="open">是</span>
                <span slot="close">否</span>
            </i-switch>
            <span class="important">&nbsp;&nbsp;&nbsp;&nbsp;是否提交参加订货会人员照片（请将照片通过企业微信提交给加盟商品专员-周海玲）</span>
        </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  name: 'Invatation',
  props: {
    meetingname: String,
    hidecityandcustomer: Boolean,
    hidephototip: Boolean,
    invatation: Object,
    listtitle: String
  },
  watch: {
    listtitle(val) {
      this.listtitleobj = val
    },
    meetingname(val) {
      this.invatationinfo.meetingname = val
    },
    hidecityandcustomer(val) {
      this.hidecityandcustomerobj = val
    },
    hidephototip(val) {
      this.hidephototipobj = val
    },
    invatationinfo: {
      handler(val, oldVal) {
        this.invatation = this.invatationinfo
      },
      deep: true
    },
    invatation: {
      handler(val, oldVal) {
        this.invatationinfo = this.invatation
      },
      deep: true
    }
  },
  data () {
    return {
      hidecityandcustomerobj: this.hidecityandcustomer,
      hidephototipobj: this.hidephototip,
      listtitleobj: this.listtitle,
      invatationinfo: this.invatation,
      ruleValidate: {
        cityname: [
          { required: true, message: '城市名称不能为空.', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    addroom() {
      var newroom = {
        roomtypename: '双人标间',
        quantity: 1
      }
      this.invatationinfo.hotelinfo.rooms.push(newroom)
    },
    removeroomat(index) {
      this.invatationinfo.hotelinfo.rooms.splice(index, 1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  width: 50%;
}
.ivu-form-item {
  margin-bottom: 8px;
  vertical-align: top;
  zoom: 1;
}
.groupheader {
  height: 50px;
  padding-top: 10px;
  padding-left: 20px;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  font-size: 13pt;
}
.important {
  color: red;
}
</style>
